<script lang="ts">
    import { Link } from 'svelte-routing';
    import { addToast } from '../../stores/toastStore';
    import Footer from '../../components/Footer.svelte';

    const handleTodo = async () => {
        event.preventDefault()

        addToast('开发中，敬请期待', 'info', 3000);
    };
</script>

<main>
    <header class="flex flex-col items-center mt-16">
        <img src="/image/logo.png" alt="Logo" class="w-32 h-32">
        <h1 class="text-xl font-semibold mt-2">车辆管理系统</h1>
    </header>

    <main class="w-full flex flex-col items-center mt-6 space-y-4">
        <Link to="/warehouse-entry" class="w-11/12 max-w-md bg-blue-500 text-white text-lg py-4 rounded-lg flex items-center justify-between px-5 shadow-md">
            <span class="flex items-center"><img src="/image/warehouse-entry.png" alt="icon" class="w-8 h-8 mr-4">入库报备</span>
            <!-- <img src="your-arrow-icon-url.png" alt="arrow" class="w-4 h-4"> -->
            <div class="w-4 h-4 leading-4">></div>
        </Link>
        <Link to="/warehouse-exit" class="w-11/12 max-w-md bg-yellow-500 text-white text-lg py-4 rounded-lg flex items-center justify-between px-5 shadow-md">
            <span class="flex items-center"><img src="/image/warehouse-exit.png" alt="icon" class="w-8 h-8 mr-4">出库报备</span>
            <div class="w-4 h-4 leading-4">></div>
        </Link>
        <Link to="/logistics-inquiry" class="w-11/12 max-w-md bg-green-500 text-white text-lg py-4 rounded-lg flex items-center justify-between px-5 shadow-md">
            <span class="flex items-center"><img src="/image/logistics-inquiry.png" alt="icon" class="w-8 h-8 mr-4">物流询价</span>
            <div class="w-4 h-4 leading-4">></div>
        </Link>
    </main>

    <footer class="w-full flex justify-around py-4 bg-white shadow-t-md mt-4">
        <Link to="/key-delivery" class="flex flex-col items-center">
            <img src="/image/key-delivery.png" alt="寄钥匙" class="w-8 h-8">
            <span class="text-xs mt-1">寄钥匙</span>
        </Link>
        <Link to="/key-duplication" class="flex flex-col items-center">
            <img src="/image/key-duplication.png" alt="配钥匙" class="w-8 h-8">
            <span class="text-xs mt-1">配钥匙</span>
        </Link>
        <Link to="/item-sendback" class="flex flex-col items-center">
            <img src="/image/item-send.png" alt="物品回寄" class="w-8 h-8">
            <span class="text-xs mt-1">物品回寄</span>
        </Link>
        <Link to="/vehicle-repair" class="flex flex-col items-center">
            <img src="/image/vehicle-repair.png" alt="车辆维修" class="w-8 h-8">
            <span class="text-xs mt-1">车辆维修</span>
        </Link>
    </footer>
    <Footer />
</main>

<style lang="scss">
</style>
